﻿
.mudblazor-index {
    margin-top: 64px;

    .docs-sections {
        margin-bottom: 128px;
    }
}

.mudblazor-svg {
    width: 100%;
    max-width: 300px;
}

.mudblazor-text-h5 {
    letter-spacing: .1rem;
    font-size: 2rem;
    font-weight: 300;
    color: var(--mud-palette-primary);

    &.smaller {
        font-size: 1.5rem;
    }
}

.mudblazor-description-text {
    font-size: 1.2rem;
    font-weight: 300;
}

@media (min-width: 960px) {

    .mudblazor-index {
        margin-top: 128px;
    }
    .mudblazor-svg {
        max-width: 400px;
    }

    .mudblazor-text-h5 {
        font-size: 3rem;
        letter-spacing: .2rem;

        &.smaller {
            font-size: 2.5rem;
        }
    }  
}

.mudblazor-section-titles {
    font-size: 38px;
    font-weight: 400;
}
.mudblazor-section-sub-title {
    font-size: 32px;
    font-weight: 500;
}

.mudblazor-goal-title {
    font-weight: 600;
    font-size: 1.2rem;
}

.mudblazor-goal-paper {
    height: 160px;

    &.material {
        box-shadow: 0 22px 45px -20px rgba(59,41,221,0.4), 0 5px 5px -3px rgba(0,0,0,.06), 0 8px 10px 1px rgba(0,0,0,.042), 0 3px 14px 2px rgba(0,0,0,.036);
    }

    &.in-c {
        box-shadow: 0 22px 45px -20px rgba(255,26,104,0.4), 0 5px 5px -3px rgba(0,0,0,.06), 0 8px 10px 1px rgba(0,0,0,.042), 0 3px 14px 2px rgba(0,0,0,.036);
    }

    &.be-included {
        box-shadow: 0 22px 45px -20px rgba(20,204,158,0.4), 0 5px 5px -3px rgba(0,0,0,.06), 0 8px 10px 1px rgba(0,0,0,.042), 0 3px 14px 2px rgba(0,0,0,.036);
    }
}

.mudblazor-project-text {
    font-weight: 500;
    font-size: 1.1rem;
}

.mudblazor-skeleton-white {
    background-color: rgba(255,255,255,.25);
}

.docs-mud-button {
    width: 200px;
    padding: 12px 0;
    margin: 0 8px;

    &.get-started {
        background: transparent linear-gradient(90deg, #594AE2 0%, rgb(119,107,231) 100%) 0% 0% no-repeat padding-box;
    }

    &.sponsor {
        background: transparent linear-gradient(18deg, #ff4081 0%, #ff669a 100%) 0% 0% no-repeat padding-box;
    }

    &.github {
        background: transparent linear-gradient(90deg, rgb(72,72,72) 0%, rgb(52,52,52) 100%) 0% 0% no-repeat padding-box;
    }

    &.become-sponsor {
        background: transparent linear-gradient(18deg, rgba(29,214,167,1) 0%, rgba(30,224,176,1) 100%) 0% 0% no-repeat padding-box;
    }

    &.try-mudblazor {
        background: transparent linear-gradient(90deg, #594AE2 0%, rgb(119,107,231) 100%) 0% 0% no-repeat padding-box;
    }

    &.discord-gitter {
        background-color: transparent;
        box-shadow: none;
        max-height: 50px;
        transition: 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

        &:hover {
            background-color: transparent;
            filter: drop-shadow(0 .35rem .35rem rgba(0,0,0,.25));
        }
    }
}

.mudblazor-app-text {
    .mud-typography {
        font-family: monospace;
        font-size: 16px;
    }
}

.mudblazor-sponsor-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;

    .mudblazor-sponsor {
        width: 180px;
        height: 80px;
        margin: 10px 5px;
        text-align: center;
        justify-content: center;
        border-radius: var(--mud-default-borderradius);
        transition: background-color 250ms cubic-bezier(.4,0,.2,1) 0ms,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0ms,border 250ms cubic-bezier(.4,0,.2,1) 0ms;

        &:hover {
            background-color: rgba(0,0,0, 0.04);
        }

        .mudblazor-sponsor-item {
            display: flex;
            align-items: center;
            display: flex;
            justify-content: center;

            .mudblazor-sponsor-image {
                width: 150px;
            }
        }
    }
}

